<template>
  <div class="yd-ls-tab-comp">
    <header class="yd-navbar navbar-bottom-line-color yd-ls-tab-box" style="height: 1rem;">
      <div class="yd-navbar-item">
        <a :href="tourl" class="">
          <span><i class="yd-back-icon" style="color: rgb(255, 255, 255);"></i></span>
        </a>
      </div>
      <div class="yd-navbar-center-box" style="height: 1rem;">
        <div class="yd-navbar-center">
          <div class="yd-ls-tab">
            <span
              class=""
              v-for="(item, index) in navList"
              :key="index"
              :class="index == activeIndex ? 'active' : ''"
              @click="changeHandler(index)">{{ item }}<i v-if="index == getDots[index]" class="yd-tabbar-dot"></i> </span>
          </div>
        </div>
      </div>
    </header>
    <div class="yd-ls-height"></div>
    <div v-if="hastips" class="yd-ls-tab-tips"><slot name="tips"></slot></div>
    <div class="yd-tab-panel">
      <div class="yd-ls-tab-panel-item" :class="0 == activeIndex ? 'yd-tab-active' : ''">
        <slot name="zero"></slot>
      </div>
      <div class="yd-ls-tab-panel-item" :class="1 == activeIndex ? 'yd-tab-active' : ''">
        <slot name="one"></slot>
      </div>
      <div class="yd-ls-tab-panel-item" :class="2 == activeIndex ? 'yd-tab-active' : ''">
        <slot name="two"></slot>
      </div>
    </div>
  </div>
</template>

<style>
  .yd-ls-tab-tips {
    display: inline-block;
    width: 100%;
    background-color: #ffb400;
    line-height: .5rem;
    text-align: center;
    color: #fff;
  }
  .yd-ls-tab-tips .yd-cell-left span:nth-child(2),
  .yd-ls-tab-tips .yd-cell-arrow:after {
    font-size: .24rem;
  }
  .yd-ls-tab-box {
    height: 1rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
  }
  .yd-ls-tab-box .yd-tabbar-dot {
    top: .1rem
  }
  .yd-ls-tab-comp .yd-tab-panel {
    background-color: transparent;
  }
  .yd-ls-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    text-align: center;
  }

  .yd-ls-tab span {
    font-size: .28rem;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
    padding: 0.1rem 0;
    border: 1px solid #fff;
    background-color: rgb(72, 112, 243);
    margin-left: -1px;
    color: #fff;
  }

  .yd-ls-tab span:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .yd-ls-tab span:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .yd-ls-tab span.active {
    background-color: #fff;
    color: #000;
  }

  .yd-ls-tab .yd-tabbar-dot {
    margin-left: -.24rem;
  }

  .navbar-bottom-line-color {
    background-color: rgb(72, 112, 243);
  }

  .yd-ls-tab-panel-item {
    width: 100%;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }

  .yd-ls-tab-panel-item.yd-tab-active {
    position: relative;
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  .yd-ls-tab-panel-item.yd-tab-active  .yd-ls-tab-panel-item {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }


</style>
<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'ydLsTab',
    props: {
      isactive: {
        type: String,
        default: '0'
      },
      types: String,
      hastips: {
        type: Boolean,
        default: false
      },
      tourl: String,
      label: String
    },
    data() {
      return {
        activeIndex: 0,
        tmpIndex: 0,
        navList: [],
        dotItem: [],
        dots: ''
      }
    },
    computed: {
      ...mapGetters({
        isDot: 'getTabUnread'
      }),
      getDots(){
        if(this.types == 'bill'){
          let dots1 = this.isDot.medical_unread ? '0': '3'
          let dots2 = this.isDot.chk_unread  ? '1': '3'
          let dots3 = this.isDot.convert_unread  ? '2': '3'
          this.dots = `${dots1}|${dots2}|${dots3}`
        }else if(this.types == 'subscribe'){
          let dots1 = this.isDot.tel_unread ? '0': '3'
          let dots2 = this.isDot.line_unread  ? '1': '3'
          this.dots = `${dots1}|${dots2}`
        }else {
          this.dots = '3'
        }

        return this.dots.split('|')
      }
    },
    created() {
      if(this.isactive){
        this.activeIndex = this.isactive
        this.tmpIndex = this.isactive
      }
    },
    methods: {
      init () {
       
        this.$nextTick(()=>{
          console.log(this.activeIndex)
        })
        this.navList = this.label.split('|');
      },
      changeHandler (indx) {
        if (this.tmpIndex !== indx) {
          //sessionStorage.removeItem("isbillpic")
          this.activeIndex = this.tmpIndex = indx;
        }
      }
    },
    mounted() {
      this.init()
    },
    components: {}


  }
</script>
